<template>
    <div class="management-less">
        <el-form :inline="true" :model="formInline" class="demo-form-inline t-a-l">
            <el-form-item label="姓名：">
                <el-input v-model="formInline.entity.user.name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="手机号：">
                <el-input v-model="formInline.entity.user.phone" placeholder=""></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="examineeList">搜索</el-button>
                <el-button class="reset" @click="reset()">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="export-less">
            <el-button type="primary">Excel导入</el-button>
            <input class="input-file" type="file" @change="changeImage($event)">
            <!-- <span class="jiafei">缴费总额：5000元</span> -->
        </div>
        <div class="border-s my-test">
            <el-table :data="tableData" style="width: 100%" :border="false">
                <el-table-column prop="user.name" label="姓名"></el-table-column>
                <el-table-column prop="user.sex" label="性别" :formatter="sexFormatter"></el-table-column>
                <el-table-column prop="vipLevel" label="会员等级" :formatter="sexVipLevel"></el-table-column>
                <el-table-column prop="user.certificate" label="身份证号"></el-table-column>
                <el-table-column prop="user.phone" label="手机号"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="byOrderData = scope.row,outerVisible = true" type="text" size="medium" class="button-my-test">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination
            background
            layout="total, sizes, prev, pager, next, jumper"
            :page-size="formInline.pageable.size"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30, 40]"
            @size-change="pageFy"
            :total="total">
            </el-pagination>
        <el-dialog title="详情" :visible.sync="outerVisible">
            <ul class="shenhe-ul" v-if="JSON.stringify(byOrderData) != '{}'">
                <li>姓名：{{byOrderData.user.name}}</li>
                <li>性别：{{byOrderData.user.sex == 0 ? '女' : '男'}}</li>
                <li>出生日期：{{byOrderData.user.birthday}}</li>
                <li>证件类型：{{byOrderData.user.certificateType | certificateTypeFiles}}</li>
                <li>证件号码：{{byOrderData.user.certificate}}</li>
                <li>毕业院校：{{byOrderData.schoolTag}}</li>
                <li>毕业时间：{{byOrderData.graduationTime}}</li>
                <li>专业：{{byOrderData.major}}</li>
                <li>最高学历：{{byOrderData.education}}</li>
                <li>从事行业：{{byOrderData.trade}}</li>
                <li>现在单位：{{byOrderData.corporation}}</li>
                <li>企业类型：{{byOrderData.corporationType}}</li>
                <li>职务：{{byOrderData.duty}}</li>
                <li>固定电话：{{byOrderData.user.telephone}}</li>
                <li>手机号码：{{byOrderData.user.phone}}</li>
                <li>电子邮箱：{{byOrderData.user.email}}</li>
                <li>备用邮箱：{{byOrderData.email_bak}}</li>
                <li>通讯地址：{{byOrderData.user.address}}</li>
                <li>邮政编码：{{byOrderData.user.postcode}}</li>
                <li>头像：<img :src="$imgPath(byOrderData.user.header)" alt=""></li>
            </ul>
            <div slot="footer" class="dialog-footer" v-if="JSON.stringify(byOrderData) != '{}'">
                <el-button type="primary" @click="outerVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            formInline: {
                entity:{
                    user:{
                        name:"",
                        phone:""
                    }
                },
                pageable:{
                    current:1,
                    size:10
                },
            },
            byOrderData:{},
            tableData:[],
            outerVisible:false,
            rejected:{
                message:''
            },
            total:0,
            keywordName:'',
            styleType:''
        }
    },
    mounted(){
        this.examineeList()
    },
    filters:{
        certificateTypeFiles(val){
            if(val == 0){
                return '身份证'
            }else if(val == 1){
                return '护照'
            }else{
                return '军官证'
            }
        }
    },
    methods:{
        // 重置搜索内容
        reset(){
            this.formInline.entity.user.name = ''
            this.formInline.entity.user.phone = ''
            this.examineeList()
        },
        // 考生管理列表
        examineeList(){
            apiHttp.apiIndex.examineePage(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data.records
                    this.total = Number(resp.data.total)
                    this.formInline.conditions = []
                }
            })
        },
        handleCurrentChange(val){
            this.formInline.pageable.current = val
            this.examineeList()
        },
        pageFy(val){
            this.formInline.pageable.size = val
            this.examineeList()
        },
        // 性别过滤器
        sexFormatter(row){
            return row.user.sex == 0 ? '女' : '男'
        },
        // 会员过率器
        sexVipLevel(row){
            if(row.vipLevel == 0){
                return '普通会员'
            }else if(row.vipLevel == 1){
                return '一年会员' 
            }else{
                return '终生会员'
            }
        },
        // 导入
        changeImage(e){
            let fd = new FormData()
            if (e.target.files[0].length !== 0) {
                fd.append('file', e.target.files[0])
            }
            apiHttp.apiIndex.gradeimport(fd).then(resp=>{
                if(resp.code == 0){
                    this.$message({
                        message: '导入成功',
                        type: 'success'
                    })
                    this.examineeList()
                }
            })
        },
    }
}
</script>
<style lang="less">
.management-less{
    .el-form{
        .el-form-item{
            .el-form-item__content{
                .el-button--primary{
                    background-color: #5d2805;
                    border-color: #5d2805;
                }
            }
        }
    }
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        position: relative;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
        .input-file{
            position: absolute;
            left: 0;
            top: 0;
            width: 108px;
            height: 40px;
            display: inline-block;
            opacity: 0;
            z-index: 99;
        }
    }
    .shenhe-ul{
        text-align: left;
        li{
            padding: 0 20px;
            line-height: 35px;
            color: #000;
            display: inline-block;
            width: 28%;
            img{
                width: 50px;
            }
        }
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 25px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>

